<template>
	<view>
		<view class="concent">
			<!-- 标题 -->
			<view class="title">
				约拍服务定制
			</view>
			<view class="type">
				<view class="laber">
					类型选择：
				</view>
				<view class="check_box">
					<u-checkbox-group v-model="checkboxValue1" @change="checkboxChange"
						style="flex-direction: row;flex-flow:wrap">
						<u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
							:label="item.name" :name="item.name" labelSize="20px" :disabled="item.disabled">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<!-- 时间选择 -->
			<view class="timer">
				<view class="" style="font-size: 22px;">
					时间&nbsp;:<view class="time_pickers" @click="this.show=true">
						{{time}}
					</view>
				</view>
				<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="datetime" :formatter="formatter"
					:closeOnClickOverlay="true" @confirm="confirms" @change="changes">
				</u-datetime-picker>
			</view>
			<!-- 日期 -->
			<view class="timer">
				<view class="" style="font-size: 22px;">
					日期&nbsp;:<view class="time_pickers" @click="this.show_time=true">
						{{time_time}}
					</view>
				</view>
				<!-- 日期选择器 -->
				<u-calendar :show="show_time" color="#f56c6c" :mode="mode" @confirm="confirm_two"></u-calendar>
			</view>
			<!-- 预算 -->
			<view class="price">
				<view class="" style="font-size: 22px;">
					预算&nbsp;:
					<view class="" style="display: inline-block;width: 80%;">
						<u-slider v-model="prcie" showValue='true' step="20" min="0" max="1000"></u-slider>
					</view>
				</view>
			</view>
			<!-- 预算 -->
			<view class="timer">
				<view class="">
					手动输入&nbsp;:
					<view style="display: inline-block;width: 70%;">
						<u--input fontSize='20' placeholder="请输入预算" border="bottom" clearable :value="prcie"></u--input>
					</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address" >
				<view class="laber" >
					你的位置&nbsp;:
					<view class="check_box" style="font-size: 16px;">
						福建省龙岩学院领导世界的哈萨克就
					</view>
				</view>
			</view>
			<view class="btn">
				<u-button type="primary" size='large' shape="circle" @click="goPiPei" text="开始匹配"></u-button>
			</view>
		</view>
		<tabber_my :current="2"></tabber_my>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				show: false,
				show_time: false,
				time: '点击选择时间',
				time_time: '点击选择日期',
				mode: 'range', //日期
				prcie: 0,
				value1: Number(new Date()),
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香123蕉',
						disabled: false
					},
					{
						name: '橙21子',
						// disabled: true
					},
					{
						name: '香23蕉',
						disabled: false
					},
					{
						name: '橙子23',
						disabled: true
					}, {
						name: '香蕉11',
						disabled: false
					},
					{
						name: '橙子122',
						disabled: true
					}, {
						name: '香蕉213',
						disabled: false
					},
					{
						name: '橙子123',
						disabled: true
					}
				],
			}
		},
		methods: {
			//选择类型
			checkboxChange(n) {
				console.log('change', n);
			},
			//选择日期
			confirm_two(e) {
				console.log(e)
				this.time_time = e[0] +'至' +e[e.length - 1]
				this.show_time = false
			},
			//选择时间
			confirms(e) {
				console.log(e)
				let date = new Date(e.value)
				this.time = date.toLocaleString()
				this.show = false
			},
			goPiPei() {
				uni.navigateTo({
					url: '../../subPackages_pipei/works/works'
				})
			},
			//格式化时间
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
	}
</script>

<style>
	.btn{
		margin-top: 20px;
	}
	.address{
		width: 98%;
		display: flex;
		flex-direction: row;
		background-color: white;
		margin-top: 10px;
	}
	.price {
		background-color: white;
		margin-top: 10px;
		height: 45px;
		padding-left: 8px;
		line-height: 25px;
	}

	.timer {
		background-color: white;
		margin-top: 10px;
		height: 45px;
		padding-left: 8px;
		line-height: 45px;
	}

	.laber {
		font-size: 20px;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 4px;
	}

	.check_box {
		flex: 3
	}

	.check_box {
		width: 100%;
	}

	.time_pickers {
		display: inline;
		font-size: 16px;
		color: #0055ff;
		margin-left: 15px;
	}

	.type {
		width: 98%;
		display: flex;
		flex-direction: row;
		background-color: white;
		margin: 10px;
	}

	.concent {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 22px;
		width: 100%;
		height: 60px;
		margin-bottom: 8px;
		line-height: 30px;
		display: flex;
		align-items: center;
		background-color: white;
		padding-left: 8px;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
	}
</style>